<template>
  <div class="PageBox">
    <div class="one">
      <h5>
       <i>转入方式</i>
        <span></span>
      </h5>
      <p>
        <img src="../images/nav-009.png" alt="" srcset="">
        账户余额
        </p>
        </div>
          <div class="eee"></div>
      <div class="one two">
        <h4>存储期限</h4>
            <ul class="ulC">
              <li v-for="(item,index) in radioHeader" :key="index" @click="add(item)" :class="active == item.id ? 'active':''">
                  <span>{{item.title}}{{item.tiem}}天</span>
                  <i>收益每天{{item.lilv}}%</i>
              </li>
            </ul>
      </div>
      <div class="eee"></div>
      <div class="one two">
        <h4>存储金额</h4>
            <div class="three">
              <i>￥</i> 
              <input type="number" maxlength="8"  :disabled="flag" placeholder="请输入存储金额" v-model="money" @click="inputa">
              <span>(预计收益{{all.toFixed(2)}})</span>
            </div>
      </div>
      <div class="eee"></div>
       <div @click="sub" class="btn">确定</div>
  </div>

</template>

<script>
export default {
  name: 'newLc',
  components: {
  },
  props: [],
  data() {
    return {
      showHeader: false,
      showPassWord: false,
      showPayWord: false,
      radioHeader: [],
      postData: {},
      active:0,
      money:'',
      all:0.00,
      lv:0,
      flag:true
    }
  },
  computed: {
  },
  watch: {
      money(){
       return this.all = this.money * this.lv
      }
  },
  created() {
    this.$parent.navBarTitle = '余额理财'
    console.log(this.$parent)
    this.list()
  },
  mounted() {

  },
  activated() {

  },
  destroyed() {

  },
  methods: {
    sub(){
       if(this.money == '' || this.active == 0){
          this.$Dialog.Toast("请选择信息");
          return
       }
       let obj = {
          userid:JSON.parse(localStorage.getItem("UserInfo")).userid,
          yuebaoid : this.active,
          money :this.money
       }
        this.$Model.newLcTj(obj,data=>{
            if(data.errorCode == 200){
              this.$Dialog.Toast(data.successMsg);
              this.active = 0
              this.flag = true
              this.money = ''
              this.$router.push(`/user/`)
              return
            }
            this.$Dialog.Toast(data.errorMsg);
        })
    },
    inputa(){
      if(this.active == 0){
        this.$Dialog.Toast('请先选择产品')
      }
    },
    add(item){
        this.flag = false
        this.active = item.id
        this.lv = item.lilv
    },
   list(){
            this.$Model.newLc({},data=>{
            this.radioHeader = data.info
        })
   }

  }
}
</script>
<style scoped>
input:disabled{background: none;}
.btn{background: #3fadfa;color: #fff;text-align: center;line-height: 50px;border-radius: 50px;width: 92%;margin: 30px auto 0 auto;}
input::-webkit-input-placeholder{
    color:#999999;
    font-weight: normal;
    font-size: 14px;
}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#999999;
    font-weight: normal;
    font-size: 14px;
}
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:#999999;
    font-weight: normal;
    font-size: 14px;
}
input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
    color:#999999;
    font-weight: normal;
    font-size: 14px;
}
.three{padding-top: 20px;padding-bottom: 10px;}
.three i{font-size: 1rem;}
.three input{border: 0;font-weight: normal;}
.three span{color: #59a1dc;font-weight: normal;}
.one{padding-left: 10px;padding-right:10px ;padding-bottom: 10px;}
.PageBox{padding-top: 50px;position: relative;}
.PageBox h5{text-align: center;padding: 10px 0;color: #969696;position: relative;}
.eee{background: #eeeeee;height: 8px;}
.two{padding-top: 10px;font-size: 16px;font-weight: bold;}
.PageBox h5 span{
  width: 100%;
  position: absolute;
  left:0;
  top: 50%;
  height: 1px;
  background: #eeeeee;
  z-index: -1;
  }
  .PageBox h5 i{background: #fff;width: 30%;display: inline-block;}
  .PageBox p{display: flex;align-items: center;background: #f3f4f6;width:45%;border-radius: 5px; padding: 15px;justify-content: center;}
   .PageBox p img{width: 30px;height: 30px;margin-right: 5px;}
   .ulC{display: flex;justify-content: space-between;align-items: center;padding-top: 20px; flex-wrap: wrap;}
   .ulC li{border: 2px solid #b2b2b2;margin-bottom: 10px; border-radius: 8px;padding: 6px;width: 30%;box-sizing: border-box;}
   .ulC li.active{border: 2px solid #4ca1da;border-radius: 8px;padding: 6px;width: 30%;background: #eff8ff; box-sizing: border-box;color: #4ca1da;}
   .ulC li span{font-size: .8rem;display: block;text-align: center;margin-bottom: 5px;}
   .ulC li i{font-size: .6rem;display: block;text-align: center;}
   .ulC::after{content: '';width: 30%;}
</style>